<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>



	<div class="panel panel-success">


    <div class="panel-heading">
        <h3 class="panel-title">发布帖子</h3>
    </div>


    <div class="panel-body">
        <form class="form-horizontal" role="form"  method="POST" enctype="multipart/form-data">
            {{ form.csrf_token }}
            <div class="form-group">
                <div class="col-xs-6">
                    {{ form.arc_name(size=20,type="text", class="form-control"  ,id="titlename" ,placeholder="请输入标题") }}
                </div>
            </div>


            <div class="form-group">
            <div class="col-xs-6">
                {{ form.arc_content(type="textarea" ,class="form-control" ,rows="3", id="content" ,placeholder="请输入内容") }}
            </div>
        </div>


	        <div class="form-group">
                <div></div>
		    <div class="col-xs-4">
		     <img src="../static/img/bk.jpg" class="img-rounded" id="avatar" style="width: 300px; height: 200px"/>
             <br/><br/><br/>
             {{form.arc_file(id="image_file", accept = '.jpg')}}
		    </div>
            <div class="col-xs-8"></div>
	    </div>

            <div style="visibility: hidden">
            {{ form.arc_location(size=20,id="local",type="text" ,placeholder="位置") }}
            {{ form.arc_longtitude(size=20,id="long",type="text"  ,placeholder="经度") }}
            {{ form.arc_latitude(size=20,id="lat",type="text" ,placeholder="纬度") }}
        </div>

	        <div class="form-group">
		    <div class="col-xs-10">
                {{ form.submit(class="btn btn-primary") }}
		    </div>
	    </div>


        </form>
    </div>


</div>





    <div>
        <h3 >地理位置</h3>
        您目前所在的区域为：<span id="loc"> </span>
        <br/>

        <div id="container" style="width:500px ; height:500px; margin: 10px 50px 0 50px;"></div>
    </div>



</body>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=gAq5j7MbvuIiwxizcFdDPgTGTXLY5wOp"></script>
    <script type="text/javascript">
    function getLocation() {
        var options = {
            enableHighAccuracy: true,
            maximumAge: 1000
        };
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
        } else {
            alert('您的浏览器不支持地理位置定位！');
        }
    }

    function onSuccess(position) {
        var longitude = position.coords.longitude;
        var latitude = position.coords.latitude;
        var map = new BMap.Map("container");
        var point = new BMap.Point(longitude, latitude);
        map.enableScrollWheelZoom(true);
        map.centerAndZoom(point, 15);
        map.addOverlay(new BMap.Marker(point));
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function (rs) {
            var addComp = rs.addressComponents;
            var location3 = '经度' + longitude +',纬度'+latitude +',位置：'+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street;
            document.getElementById('loc').innerHTML=location3;
            document.getElementById("local").value = addComp.province+addComp.city+addComp.district+addComp.street + addComp.streetNumber;
            document.getElementById("long").value =longitude;
            document.getElementById("lat").value =latitude;
        });
        handleData(longitude, latitude);
    }


    function onError(error) {
        switch (error.code) {
        case 1:
            alert("位置服务被拒绝！");
            break;
        case 2:
            alert("暂时获取不到位置信息！");
            break;
        case 3:
            alert("获取信息超时！");
            break;
        case 4:
            alert("未知错误！");
            break;
        }
    }
    window.onload = function () {
        getLocation();
    };
</script>
</html>